import styled from 'styled-components';
import { CSSProperties, useRef, useState } from 'react';
import { InboxOutlined, SettingOutlined } from '@ant-design/icons';
import {
    ModalForm,
    ProForm,
    ProFormDateRangePicker,
    ProFormSelect,
    ProFormText,
    ProFormTextArea,
} from '@ant-design/pro-components';
import { Button, Upload, Form, message, Input } from 'antd';
import { Player } from 'video-react';
import AudioPlayer from 'react-h5-audio-player';

import "video-react/dist/video-react.css";
import { peerAssistantSv2tts } from '@/services/peer';
import { saveFile } from '@/utils';
import { writeFile } from '@tauri-apps/plugin-fs';

import 'react-h5-audio-player/lib/styles.css';

const { Dragger } = Upload;
const { TextArea } = Input;

export const SoundCloneAssistant = (props: {
    style?: CSSProperties;
    title?: string,
    buttonTitle?: string,
    text: string,
    onChange?: (value: string) => Promise<void>
}) => {

    const [form] = Form.useForm<{
        aiRobot: string;
        model: string;
        system: string;
    }>();

    const [loading, setLoading] = useState<boolean>(false);

    const [audio, setAudio] = useState<string | null>('http://asset.localhost/E:\\dib\\声音\\小张\\output2.wav');

    const [inputs, setInputs] = useState<string>('请写一段500字的小故事。');
    //
    return (
        <Container style={props.style}>
            <Header>
                <TitleContainer>
                    <div>
                        <Title>音频选择</Title>
                    </div>
                    <ModalForm<{
                        aiRobot: string;
                        model: string;
                        system: string;
                    }>
                        title="AIChat设置"
                        trigger={
                            <SettingsContainer>
                                <SettingOutlined />
                            </SettingsContainer>
                        }
                        form={form}
                        autoFocusFirstInput
                        modalProps={{
                            destroyOnClose: true,
                            onCancel: () => console.log('run'),
                        }}
                        submitTimeout={2000}
                        onFinish={async (values) => {
                            console.log(values.name);
                            message.success('提交成功');
                            return true;
                        }}
                    >
                        <ProForm.Group>
                            <ProFormSelect
                                request={async () => [
                                    {
                                        value: 'chapter',
                                        label: '盖章后生效',
                                    },
                                ]}
                                name="aiRobot"
                                label="AI选择"
                            />
                            <ProFormSelect
                                request={async () => [
                                    {
                                        value: 'chapter',
                                        label: '盖章后生效',
                                    },
                                ]}
                                name="model"
                                label="模型选择"
                            />
                        </ProForm.Group>
                        <ProFormTextArea
                            name="system"
                            label="System提示词"
                            initialValue="你是一名无所不能的专家,可以解决任何问题。"
                        />
                    </ModalForm>
                </TitleContainer>
                <ButtonContainer>
                    <Dragger {...{
                        name: 'file',
                        multiple: false,
                        onChange(info) {
                            const { status } = info.file;
                            if (status !== 'uploading') {
                                console.log(info.file, info.fileList);
                            }
                            if (status === 'done') {
                                message.success(`${info.file.name} file uploaded successfully.`);
                            } else if (status === 'error') {
                                message.error(`${info.file.name} file upload failed.`);
                            }
                        },
                        onDrop(e) {
                            console.log('Dropped files', e.dataTransfer.files);
                        },
                    }}>
                        <p className="ant-upload-drag-icon">
                            <InboxOutlined />
                        </p>
                        <p className="ant-upload-text">点击或者拖拽音频文件到这里</p>
                        <p className="ant-upload-hint">
                            Support for a single or bulk upload. Strictly prohibited from uploading company data or other
                            banned files.
                        </p>
                    </Dragger>
                </ButtonContainer>
                <Input></Input>
            </Header>
            <div>
                <TitleContainer>
                    <div>
                        <Title>视频选择</Title>
                    </div>
                    <ModalForm<{
                        aiRobot: string;
                        model: string;
                        system: string;
                    }>
                        title="AIChat设置"
                        trigger={
                            <SettingsContainer>
                                <SettingOutlined />
                            </SettingsContainer>
                        }
                        form={form}
                        autoFocusFirstInput
                        modalProps={{
                            destroyOnClose: true,
                            onCancel: () => console.log('run'),
                        }}
                        submitTimeout={2000}
                        onFinish={async (values) => {
                            console.log(values.name);
                            message.success('提交成功');
                            return true;
                        }}
                    >
                        <ProForm.Group>
                            <ProFormSelect
                                request={async () => [
                                    {
                                        value: 'chapter',
                                        label: '盖章后生效',
                                    },
                                ]}
                                name="aiRobot"
                                label="AI选择"
                            />
                            <ProFormSelect
                                request={async () => [
                                    {
                                        value: 'chapter',
                                        label: '盖章后生效',
                                    },
                                ]}
                                name="model"
                                label="模型选择"
                            />
                        </ProForm.Group>
                        <ProFormTextArea
                            name="system"
                            label="System提示词"
                            initialValue="你是一名无所不能的专家,可以解决任何问题。"
                        />
                    </ModalForm>
                </TitleContainer>
                <ButtonContainer>
                    <Dragger {...{
                        name: 'file',
                        multiple: false,
                        onChange(info) {
                            const { status } = info.file;
                            if (status !== 'uploading') {
                                console.log(info.file, info.fileList);
                            }
                            if (status === 'done') {
                                message.success(`${info.file.name} file uploaded successfully.`);
                            } else if (status === 'error') {
                                message.error(`${info.file.name} file upload failed.`);
                            }
                        },
                        onDrop(e) {
                            console.log('Dropped files', e.dataTransfer.files);
                        },
                    }}>
                        <p className="ant-upload-drag-icon">
                            <InboxOutlined />
                        </p>
                        <p className="ant-upload-text">点击或者拖拽音频文件到这里</p>
                        <p className="ant-upload-hint">
                            Support for a single or bulk upload. Strictly prohibited from uploading company data or other
                            banned files.
                        </p>
                    </Dragger>
                </ButtonContainer>
                <Input></Input>
                <TitleContainer>
                    <div>
                        <Title>台词</Title>
                    </div>
                    <ModalForm<{
                        aiRobot: string;
                        model: string;
                        system: string;
                    }>
                        title="AIChat设置"
                        trigger={
                            <SettingsContainer>
                                <SettingOutlined />
                            </SettingsContainer>
                        }
                        form={form}
                        autoFocusFirstInput
                        modalProps={{
                            destroyOnClose: true,
                            onCancel: () => console.log('run'),
                        }}
                        submitTimeout={2000}
                        onFinish={async (values) => {
                            console.log(values.name);
                            message.success('提交成功');
                            return true;
                        }}
                    >
                        <ProForm.Group>
                            <ProFormSelect
                                request={async () => [
                                    {
                                        value: 'chapter',
                                        label: '盖章后生效',
                                    },
                                ]}
                                name="aiRobot"
                                label="AI选择"
                            />
                            <ProFormSelect
                                request={async () => [
                                    {
                                        value: 'chapter',
                                        label: '盖章后生效',
                                    },
                                ]}
                                name="model"
                                label="模型选择"
                            />
                        </ProForm.Group>
                        <ProFormTextArea
                            name="system"
                            label="System提示词"
                            initialValue="你是一名无所不能的专家,可以解决任何问题。"
                        />
                    </ModalForm>
                </TitleContainer>
                <TextArea
                    style={{
                        width: '100%',
                        flex: 1
                    }}
                    value={inputs}
                    rows={8}
                    onChange={(event) => {
                        setInputs(event.target.value);
                    }}
                ></TextArea>
                <ButtonContainer>
                    <Button style={{ width: '100%' }} danger type={'primary'}
                        onClick={async () => {
                            //assistant
                            setLoading(true);
                            setAudio(null);
                            try {
                                let result = await peerAssistantSv2tts(
                                    'E:\\dib\\声音\\小张\\output.mp4',
                                    '我希望通过这封电子邮件与您建立联系，并分享我对一项创新性的商业想法。',
                                    props.text,
                                    'E:/dib/声音/小张',
                                    {
                                        local_file: 'output2.wav',
                                        extensions: {
                                        }
                                    });
                                console.log("ssss", result);
                                setAudio(`http://asset.localhost/E:\\dib\\声音\\小张\\output2.wav`);
                            } catch (err) {
                                console.log(err);
                            }
                            setLoading(false);
                        }}>{props.buttonTitle || '生成'}</Button>
                </ButtonContainer>
            </div>
        </Container>
    );
}

export default SoundCloneAssistant;


const Container = styled.div`
    height: 100%;
    width: 100%;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
`;


const Header = styled.div`
    height: 220px;
    width: 100%;
`;

const TitleContainer = styled.div`
    height: 30px;
    width: 100%;
    display: flex;
    justify-content: space-between;
`;
const Title = styled.div`
    height: 30px;
    line-height: 30px;
    font-size:12px;
    font-weight: 600;
`;

const ButtonContainer = styled.div`
    width: 100%;
    padding: 8px 10px;
`;
const SettingsContainer = styled.div`
    width: 30px;
    height: 30px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
`;